<template>
	<view>
		<u-navbar height="50" back-icon-color="#333" title="登录"
			title-color="#333" title-size="36"></u-navbar>
		<view class="line"></view>
		<view class="layoutView">
			<view class="logoView">
				<image class="logoIcon" :src="logoUrl"></image>
			</view>
		</view>
		<view class="layoutView2">
			<view class="headTitle">手机验证码登录</view>
			<view class="inputView">
				<image class="inputIcon" src="/static/phone.png"></image>
				<input placeholder="请输入11位数字手机号" placeholder-style="color: #949599;" v-model="username" />
			</view>
			<view class="inputView">
				<image class="inputIcon" src="/static/pwd.png"></image>
				<input placeholder="请输入验证码" placeholder-style="color: #949599;" v-model="smscode" />
				<text class="codeView" @click="onGetCode()">{{smsText}}</text>
			</view>
			<view class="otherView">
				<text @click="onAccountLogin()">账户密码登录</text>
				<text @click="onGetPassword()">忘记密码?</text>
			</view>
			<view class="register" @click="onLogin()">立即登录</view>
			<view class="loginView">还没有账号，<text @click="onRegister()">立即注册</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				smscode: '',
				timers: null,
				time: 60,
				smsText: '发送验证码',
				logoUrl: ''
			}
		},
		onLoad() {
			this.initLogo();
		},
		methods: {
			initLogo(){
				let self = this;
				self.$api.getLogo({}, true).then(res => {
					self.logoUrl = res.data.logo;
				});
			},
			onGetCode() {
				let self = this
				if (self.timers != null) {
					self.$utils.tips(self.time + 's后重新发送');
					return;
				}
				if (self.$utils.isEmpty(self.username)) {
					self.$utils.tips('请输入手机号');
					return
				}
				self.$user.getCode({
					phone: this.username
				}, true).then(res => {
					self.$utils.tips('短信发送成功');
					self.timers = setInterval(() => {
						self.timeout();
					}, 1000);
				});
			},
			timeout() {
				let self = this
				if (self.time == 0) {
					self.smsText = "发送验证码"
					self.time = 60
					clearInterval(self.timers);
					self.timers = null;
				} else {
					self.time--
					self.smsText = self.time + 's后重新发送'
				}
			},
			onLogin() {
				let self = this;
				if (self.$utils.isEmpty(self.username)) {
					self.$utils.tips('请输入手机号');
					return
				}
				if (self.$utils.isEmpty(self.smscode)) {
					self.$utils.tips('请输入验证码');
					return
				}
				self.$user.codeLogin({
					code: self.smscode,
					phone: this.username
				}, true).then(res => {
					self.$utils.tips('登录成功');
					uni.setStorageSync("isLogin", true);
					uni.setStorageSync("access_token", res.data.access_token);
					uni.setStorageSync("token_type", res.data.token_type);
					setTimeout(function() {
						uni.switchTab({
							url: '/pages/index/index'
						});
					}, 500);
				});
			},
			onRegister() {
				this.$utils.jump('/pages/register/register');
			},
			onAccountLogin() {
				this.$utils.jump('/pages/login/login');
			},
			onGetPassword() {
				this.$utils.jump('/pages/forget-login-pwd/forget-login-pwd');
			},
		}
	}
</script>

<style>
	@import url('code-login.css');
</style>
